<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="../js/leaflet-src.js"></script>
    <link rel="stylesheet" href="../css/leaflet.css">
    <style>
        html, body {
            width: 100%;
            height: 100%;
        }

        #mapDiv {
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body>
<div id="mapDiv"></div>
<script>
    //TODO:注意的地方，
    // TODO 1.想要让地图占满整个屏幕，除了设置地图容器mapDiv宽高为100%，还要把父元素body和html的宽高设置为100%，不然mapDiv的高度始终为0。
    // TODO 2.加载地图的js代码要写在body中，因为要先创建body中的地图容器mapDiv才能进行地图的加载，若将加载地图的js代码写在head中，就会报错地图容器不存在。
    // TODO 3.前两条是基础的前端小问题，关于leaflet的问题在于setView（）中第一个参数也就是中心点坐标，纬度在前经度在后，和ArcGIS API有所不同（ArcGIS是先经度再纬度）。

    var map = L.map("mapDiv").setView([36.55, 117.32], 13);
    console.log("%c->   map: ','color: MidnightBlue; background: Aquamarine; font-size: 20px;", map);

    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'}).addTo(map);
</script>
</head>
<body>
</body>
</html>
